<template>
	<view class="center">
		<view class="father">
			<view class="progress text-center" :style="'--progress:'+red+'; --last:'+gray">

			</view>
			<view class="timer-count color-blue font-weight">{{nowCount}}s</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TimeRoundCount",
		props: {
			time: Number
		},
		data() {
			return {
				red: '100%',
				gray: "0%",
				nowCount: 0,
				timer: '',
				totalCount: 0,
			};
		},
		mounted() {
			let that = this;
			that.nowCount = that.time;
			console.log(that.nowCount)
			if (that.nowCount) {
				that.nowCount = that.time
				this.totalCount = that.time;

			} else {
				that.nowCount = 30
				this.totalCount = 30;
			}

			that.timer = setInterval(() => {
				let times = --that.nowCount;
				let redCycle = (100 / that.totalCount * times).toFixed(2); // 保留两位小数
				console.log(times + "----")
				that.nowCount = times;
				that.red = `${redCycle}%`;
				that.gray = `${(100 - redCycle).toFixed(2)}%` // 保留两位小数
				if (times == 0) {
					clearInterval(that.timer)
				}
			}, 1000);
		}
	}
</script>

<style scoped>
	.father {
		padding: 10px;
	}

	.progress {
		width: 132rpx;
		height: 132rpx;
		background: conic-gradient(#200ee5 0% var(--progress), #D9D9D9 var(--progress) 100%);
		border-radius: 50%;
		position: relative;
	}

	.progress::before {
		content: "";
		position: absolute;
		inset: 6rpx;
		background-color: #fff;
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		line-height: 124rpx;
		border-radius: 50%;
	}

	.timer-count {
		text-align: center;
		z-index: 55;
		position: relative;
		top: -45px;
	}
</style>